<template>
  <div class="history">
    <div class="top-search">
      <el-form class="m7-form clearfix" ref="form" :model="query" size="mini" label-position="top">
        <el-form-item label="类型" class="fl" style="margin-right: 20px">
          <el-select
            v-model="query.type"
            filterable
            placeholder="请选择"
            size="mini"
            @change="quickQuery"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间" class="fl"
          :class="['CallCard', 'DataCenterCall'].includes(commonData.importType) ? 'callDate' : 'webchatDate'">
          <el-date-picker
            size="mini"
            v-model="query.time"
            type="datetimerange"
            :picker-options="pickerOptions"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            align="right"
            @change="quickQuery"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <div class="history-list" :class="['webchatTodo'].includes(commonData.importType) ? 'webchatTodoList' : ''">
      <div
        class="history-item"
        v-for="(item, index) in listData"
        :key="index"
        :class="item._id === currentId ? 'current-check' : ''"
      >
        <span :class="item.iconfont" class="top-icon V7_iconfont"></span>
        <span class="item-line" v-show="index !== 0"></span>
        <div class="item-top" v-if="item.type !=='im'">
          <span class="item-label">{{ item.status | getCallStatus }}</span>
          <span>{{ item.beginTime || '' }}</span>
        </div>
        <div class="item-top" v-else>
          <span class="item-label"><i class="V7_iconfont webchatIcon" :class="item.platformIcon"></i><span class="accessName">{{item.accessName}}</span></span>
          <span class="fr">{{ item.createTime || '' }}</span>
        </div>
        <div class="item-bottom clearfix" v-if="item.type !== 'im'">
          <div class="fl">
            <span>{{ item.type === 'outbound' ? '外呼座席：' : '接听座席' }}</span>
            <span class="agent-name">{{ item.agentData}}</span>
          </div>
          <div class="fr">
            <span
              class="V7_iconfont V7_iconV7tubiao_shengyin"
              @click="listen(item)"
              v-if="(item.status && ['ANSWER', 'CALL_THREEWAY', 'CALL_TRANSFER', 'CALL_CONSULT', 'CALL_CONSULT_TRANSFER', 'VOICEMAIL'].indexOf(item.status) > -1) && showListen && (item.recordFile || item.voiceMailUrl)"
              :class="audioNode && item._id === currentId ? 'active-icon' : ''"
            ></span>
            <span
              class="V7_iconfont V7_iconV7tubiao_jilu"
              @click="checkDetail(item)"
              :class="callDetail && item._id === currentId ? 'active-icon' : ''"
            ></span>
            <span
              class="V7_iconfont V7_iconV7tubiao_guiji1"
              @click="checkIvr(item)"
              :class="ivr && item._id === currentId ? 'active-icon' : ''"
            ></span>
          </div>
        </div>
        <div class="item-bottom clearfix" v-else>
          <div class="fl webchatAgent">
            <span>接待座席：</span>
            <span class="agent-name">{{ item.agentData}}</span>
          </div>
          <div class="fr">
            <span
              class="V7_iconfont V7_iconV7tubiao_jilu"
              @click="webchatHistoryFun(item)"
              :class="webchatHistory && item._id === currentId ? 'active-icon' : ''"
            ></span>
            <span
              class="V7_iconfont V7_iconV7tubiao_zaixianzhuangtai"
              @click="webchatDetail(item)"
              :class="webchatInfo && item._id === currentId ? 'active-icon' : ''"
            ></span>
            <!-- <span
              class="V7_iconfont V7_iconV7tubiao_guiji1"
              @click="webchatProcessFun(item)"
              :class="webchatProcessInfo && item._id === currentId ? 'active-icon' : ''"
            ></span> -->
          </div>
        </div>
        <div class="item-detail-box" v-if="item._id === currentId">
          <div v-if="item.type !== 'im'">
            <audioComponent
              v-show="audioNode"
              :flagId="'history_' + item._id"
              ref="audioRef"
              :isAutoPlay="true"
              :srcUrl="recordFile | getFileUrl"
              :showDowload="showDowload"
              :showListen="showListen"
            ></audioComponent>
            <div v-if="callDetail" class="call-detail-box">
              <p>通话记录ID： {{callData._id}}</p>
              <div class="clearfix">
                <p class="fl info-text-left">号码： {{callData.customerNumber | getHideTel}}</p>
                <p class="fl">地区： {{callData | getProvince}}</p>
              </div>
              <div class="clearfix">
                <p class="fl info-text-left">呼叫类型： {{callData.callType | getCallType}}</p>
                <p class="fl">呼叫状态： {{callData.status | getCallStatus}}</p>
              </div>
              <div class="clearfix">
                <p class="fl info-text-left">通话时长： {{callData.bridgeDuration | getTimeLength}}</p>
                <p class="fl">排队时长： {{ callData.waitDuration | getTimeLength }}</p>
              </div>
              <div class="clearfix">
                <p class="fl info-text-left">满意度调查结果： {{callData.satisName || '--'}}</p>
                <p class="fl">满意度调查时长： {{callData.satisfyDuration | getTimeLength}}</p>
              </div>
              <!--别删，迟早有一天会加回来的-->
              <!--<p>呼叫时间： {{callData.startTime || '&#45;&#45;'}}</p>-->
              <!--<p>语音导航： {{callData.ivrName || '&#45;&#45;'}}</p>-->
              <!--<p>技能组： {{callData.queueName || '&#45;&#45;'}}</p>-->
              <!--<p>呼叫座席时间： {{callData.agentStartTime || '&#45;&#45;'}}</p>-->
              <!--<p>座席振铃时长： {{callData.agentRingDuration | getTimeLength}}</p>-->
              <!--<p>座席接听时间： {{callData.agentAnswerTime || '&#45;&#45;'}}</p>-->
              <!--<p>挂机时间： {{callData.endTime}}</p>-->
              <div class="clearfix">
                <p class="fl info-text-left">挂机方： {{callData.hangUpSide | getHangUpSideName}}</p>
              </div>
              <div class="stright"></div>
              <div class="tags" style="margin-bottom: 16px">
                <tag v-for="(item, index) in callData.tags || []" :key="'tag' + index" :data='tagMap.get(item)' :closeShow="false"></tag>
              </div>
            </div>
            <div v-if="ivr" class="ivr-box">
              <ivrList :id="item.recordId" :showDowload="showDowload" :showListen="showListen"></ivrList>
            </div>

          </div>
          <div v-else>
            <div v-if="webchatInfo" class="webchatInfo">
              <p v-for="(item, index) in informationArr" :key="index" class="infoItem">
                <span class="title">{{item.name}}</span>
                <span class="content">{{webchatInfoData[item.value] ? webchatInfoData[item.value] : ''}}</span>
              </p>
            </div>
            <div v-if="webchatProcessInfo" class="webchatInfo">
              <webchatProcessInfo :processInfo="webchatProcessData"></webchatProcessInfo>
            </div>
            <div v-if="webchatHistory" class="webchatInfo">
              <webchatMessageHistory :webchatHistoryInfo="webchatHistoryInfo"></webchatMessageHistory>
            </div>
          </div>
        </div>
      </div>
      <div class="no-data" v-show="listData.length <= 0"></div>
      <div @click.stop="queryMore" class="query-more" v-show="isMore">查看更多</div>
    </div>
  </div>
</template>
<script lang="ts">
import audioComponent from '@components/audio/index.vue'
import ivrList from './tabCommon/ivrList.vue'
import webchatInfo from '@/views/webchat/common/webchatInfo.vue'
import webchatProcessInfo from '@/views/webchat/common/webchatProcessInfo.vue'
import webchatMessageHistory from '@/views/webchat/webchatMessageHistory.vue'
import { CommonModule } from '@/store/modules/common'
import { getCallTimeLength, getFormatDateTime, deepClone, getCallStatusName, getCallTypeName, millsToDate, checkHideTel } from '@/utils/common'
import { Component, Vue, Ref, Prop, Watch } from 'vue-property-decorator'
import tag from '@/components/tag/index.vue'
import { TagModule } from '@/store/modules/tag'
interface QueryData {
   type: string
   time: any
   customerId: string
   page: number
   limit: number
}
@Component({
  name: 'History',
  components: { audioComponent, ivrList, webchatInfo, webchatProcessInfo, webchatMessageHistory, tag },
  filters: {
    getHideTel (customerNumber) {
      return checkHideTel(customerNumber) || '--'
    },
    getHangUpSideName (hangUpSide) {
      if (hangUpSide === 'AGENT') {
        return '座席挂机'
      } else if (hangUpSide === 'CUSTOMER') {
        return '客户挂机'
      } else if (hangUpSide === 'SYSTEM') {
        return '系统挂机'
      }
    },
    getTimeLength (timeLength) {
      return getCallTimeLength(timeLength, false)
    },
    getCallType (type) {
      return getCallTypeName(type)
    },
    getCallStatus (status) {
      return getCallStatusName(status)
    },
    getFileUrl (url) {
      return url.replace(/(http|https):/ig, '')
    },
    getProvince (data) {
      if (data.customerProvince) {
        return data.customerProvince + '-' + data.customerCity
      } else {
        return '未知'
      }
    }
  }
})
export default class History extends Vue {
  @Ref() private audioRef: any
  @Prop({ default: {} }) private commonData!: any
  @Prop({ default: false }) private showDowload!: boolean
  @Prop({ default: false }) private showListen!: boolean
  private currentId: string = ''
  private callDetail: boolean = false
  private ivr: boolean = false
  private audioNode: boolean = false
  private callData: any = {}
  private isMore: boolean = false
  private webchatInfo: boolean = false
  private webchatInfoData: any = {}
  private webchatProcessInfo: boolean = false
  private webchatProcessData: any = {}
  private webchatHistory: boolean = false
  private webchatHistoryInfo: any = {}
  private $store: any
  private $getCache: any
  private preCustomerId: string = ''
  private informationArr = [ // 访问信息展示字段
    // { name: '浏览器：', value: 'accessName' },
    // { name: '操作系统：', value: 'accessName' },
    { name: '地域&地址：', value: 'area' },
    { name: 'IP地址：', value: 'ip' },
    { name: '访问来源：', value: 'seoSource' },
    { name: '搜索关键词：', value: 'seoKeywords' },
    { name: '会话创建时间：', value: 'createTime' },
    { name: '会话结束时间：', value: 'endTime' },
    { name: '会话次数：', value: 'dialogueTimes' },
    { name: '会话时长：', value: 'sessionTime' }
  ]

  private query: QueryData = {
    type: '',
    time: [],
    customerId: '',
    page: 1,
    limit: 10
  }

  private recordFile: string = ''
  private pickerOptions: any = {
    shortcuts: [{
      text: '最近一周',
      onClick (picker: any) {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
        const startTime = new Date(start.getFullYear(), start.getMonth(), start.getDate(), 0, 0, 0)
        const endTime = new Date(end.getFullYear(), end.getMonth(), end.getDate(), 23, 59, 59)
        picker.$emit('pick', [startTime, endTime])
      }
    }, {
      text: '最近一个月',
      onClick (picker) {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 29)
        const startTime = new Date(start.getFullYear(), start.getMonth(), start.getDate(), 0, 0, 0)
        const endTime = new Date(end.getFullYear(), end.getMonth(), end.getDate(), 23, 59, 59)
        picker.$emit('pick', [startTime, endTime])
      }
    }, {
      text: '最近三个月',
      onClick (picker) {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 89)
        const startTime = new Date(start.getFullYear(), start.getMonth(), start.getDate(), 0, 0, 0)
        const endTime = new Date(end.getFullYear(), end.getMonth(), end.getDate(), 23, 59, 59)
        picker.$emit('pick', [startTime, endTime])
      }
    }]
  }

  private options: object[] = [
    { label: '全部', value: '' },
    { label: '呼入', value: 'incoming' },
    { label: '外呼', value: 'dialout' },
    { label: '转移', value: 'transfer' },
    { label: '咨询转移', value: 'consultTransfer' },
    { label: '双向回呼', value: 'webcall' },
    { label: '预览外呼', value: 'previewDialout' },
    { label: '自动外呼', value: 'autoDialout' },
    { label: '在线', value: 'im' }
  ]

  private listData: object[] = []

  private listen (item: any) {
    const recordUrl = item.recordFile || item.voiceMailUrl
    if (!this.recordFile || this.recordFile !== recordUrl) { // 第一次点 || 不是第一次点 && 当前点的新的item
      this.recordFile = recordUrl
    }
    if ((this.currentId && this.currentId !== item._id)) { // 不是第一次点 && 当前点的新的item
      this.audioRef[0].pauseAudioChange('close')
      this.audioNode = true
    } else if (this.currentId === item._id && this.audioNode) { // 点的是当前的item，收起的时候暂停录音
      this.audioRef[0].pauseAudioChange('close')
      this.audioNode = false
    } else {
      this.audioNode = !this.audioNode
    }
    this.currentId = item._id
    this.callDetail = false
    this.ivr = false
  }

  private checkDetail (item: any) {
    if (this.currentId && this.currentId !== item._id) { // 不是第一次点 && 当前点的新的item
      this.callDetail = true
    } else {
      this.callDetail = !this.callDetail
    }
    if (!this.callDetail) { // 再次点击icon，收起的时候，不发请求
      return false
    }
    CommonModule.publicAction({ url: '/call/action/cdr/detail', method: 'GET', data: { id: item.recordId } }).then((res: any) => {
      if (res && res.success) {
        const resData = res.data || {}
        if (resData.keys) {
          const satisArr = deepClone(this.getPhoneSatisfactionList) || []
          let str = ''
          satisArr.forEach((item1) => {
            if (resData.keys.indexOf(item1.key) > -1) {
              str += item1.value
            }
          })
          if (!str) {
            str = '--'
          }
          resData.satisName = str
        }
        this.callData = resData
        if (this.recordFile !== item.filedUrl) {
          this.recordFile = ''
        }
        this.currentId = item._id
        this.ivr = false
        this.audioNode = false
      }
    })
  }

  // private tagList = []
  get tagList () {
    return TagModule.tagList
  }

  private webchatDetail (obj) { // 获取在线详情
    if (this.currentId && this.currentId !== obj._id) { // 不是第一次点 && 当前点的新的item
      this.webchatInfo = true
    } else {
      this.webchatInfo = !this.webchatInfo
    }
    if (!this.webchatInfo) { // 再次点击icon，收起的时候，不发请求
      return false
    }
    const sendData = {
      _id: obj._id,
      visitorId: obj.visitorId
    }
    this.handleWebchatAction(obj, () => {
      this.currentId = obj._id
    })
    this.webchatProcessInfo = false
    this.webchatHistory = false
  }

  private webchatHistoryFun (item) {
    if (this.currentId && this.currentId !== item._id) { // 不是第一次点 && 当前点的新的item
      this.webchatHistory = true
    } else {
      this.webchatHistory = !this.webchatHistory
    }
    const { endTimestamp, visitorId, _id }: any = item
    this.webchatHistoryInfo = { dateTime: endTimestamp, visitorId, _id }
    this.currentId = _id
    this.webchatInfo = false
    this.webchatProcessInfo = false
  }

  private webchatProcessFun (item: any) { // 获取在线流程数据
    if (this.currentId && this.currentId !== item._id) { // 不是第一次点 && 当前点的新的item
      this.webchatProcessInfo = true
    } else {
      this.webchatProcessInfo = !this.webchatProcessInfo
    }
    this.handleWebchatAction(item, () => {
      this.currentId = item._id
    })
    this.webchatInfo = false
    this.webchatHistory = false
  }

  private handleWebchatAction (item, callback) {
    const sendData = {
      _id: item._id,
      visitorId: item.visitorId
    }
    CommonModule.publicAction({ url: '/im-center/action/webchat/queryChatInfoById', method: 'POST', data: sendData }).then((res: any) => {
      if (res && res.success && res.chatSession) {
        this.webchatInfoData = res.chatSession
        if (this.webchatInfoData.createTimestamp && this.webchatInfoData.endTimestamp) {
          this.webchatInfoData.sessionTime = millsToDate(this.webchatInfoData.endTimestamp - this.webchatInfoData.createTimestamp)
        } else {
          this.webchatInfoData.sessionTime = '--'
        }
        this.webchatProcessData = res.scheduleHistory || []
        if (callback) {
          callback()
        }
      }
    })
  }

  private checkIvr (item: any) {
    if (this.recordFile !== item.filedUrl) {
      this.recordFile = ''
    }
    if (this.currentId && this.currentId !== item._id) { // 不是第一次点 && 当前点的新的item
      this.ivr = true
    } else {
      this.ivr = !this.ivr
    }
    this.currentId = item._id
    this.callDetail = false
    this.audioNode = false
  }

  private quickQuery () {
    this.restHandle(true)
    this.fetchData()
  }

  private restHandle (type?: boolean) {
    this.listData = [] // 重置之前的搜索出来的数据
    this.query.page = 1 // 快捷检索的时候，重置到第一页
    if (!type) { // 切换类型，时间搜索时，不重置时间
      const nowTime = new Date()
      const mtDate = nowTime.getTime()
      const startTime = getFormatDateTime(new Date(mtDate - 3600 * 1000 * 24 * 6), '').split(' ')[0] + ' 00:00:00'
      const endTime = getFormatDateTime(new Date(), '').split(' ')[0] + ' 23:59:59'
      this.query.time = [startTime, endTime] // 默认搜索最近一周的记录
    }
  }

  private fetchData () {
    this.query.customerId = this.commonData.custId || ''
    if (!this.query.customerId) { // 没有customerId，不发请求（没有定位到客户的时候）
      this.restHandle(true)
      return false
    }
    if (this.preCustomerId && this.preCustomerId !== this.query.customerId) { // 和上一次展示的不是一个客户
      this.restHandle()
    }
    const query = deepClone(this.query)
    if (query.time && query.time.length > 0) {
      query.time = [getFormatDateTime(query.time[0], ''), getFormatDateTime(query.time[1], '')]
    } else {
      query.time = []
    }
    const webchat = CommonModule.publicAction({ url: '/im-center/action/customer/contact/find', method: 'POST', data: query })
    const call = CommonModule.publicAction({ url: '/crm/action/contact/find', method: 'POST', data: query })
    Promise.all([webchat, call]).then(([webchatRes, callRes]: any) => {
      if (webchatRes && webchatRes.success && callRes && callRes.success) {
        const allList = webchatRes.data.concat(callRes.list)
        const resList = this.handleResList(allList || [])
        this.listData = [...this.listData, ...resList]
        this.preCustomerId = this.query.customerId
        if (resList.length < this.query.limit) { // 没有多余的数据了
          this.isMore = false
        } else {
          this.isMore = true
        }
      }
    })
  }

  private handleResList (list: any) {
    const channelList = this.$store.state.common.publicCache.channelList || []
    list.forEach((item: any) => {
      item.agentData = item.agentNumber ? `${item.agentName}[${item.agentNumber}]` : '--'
      const accessObj = channelList.find((channelItem: any) => { // 接入号
        return channelItem.accessId === item.accessId
      })
      item.accessName = accessObj ? accessObj.name : '--'
      if (['dialout', 'autoDialout', 'previewDialout', 'incoming', 'transfer', 'consultTransfer', 'webcall'].indexOf(item.type) > -1) {
        if (item.status === 'ANSWER') { // 已接听
          if (['webcall', 'incoming', 'transfer', 'consultTransfer'].includes(item.type)) { // 呼入
            item.iconfont = 'V7_iconV7tubiao_huru'
          } else { // 外呼
            item.iconfont = 'V7_iconV7tubiao_tonghua'
          }
        } else if (item.status === 'CALL_TRANSFER') { // 转移
          item.iconfont = 'V7_iconV7tubiao_hujiaozhuanyi'
        } else if (item.status === 'CALL_CONSULT') { // 咨询
          item.iconfont = 'V7_iconV7tubiao_hujiaozixun'
        } else if (item.status === 'CALL_CONSULT_TRANSFER') { // 咨询转移
          item.iconfont = 'V7_iconV7tubiao_jilu-zixunzhuanyi'
        } else if (item.status === 'CALL_THREEWAY') { // 三方
          item.iconfont = 'V7_iconV7tubiao_jilu-sanfangtonghua'
        } else { // 其他未接听状态
          item.iconfont = 'V7_iconV7tubiao_weijietong'
        }
      } else if (item.type === 'im') {
        item.iconfont = 'V7_iconV7tubiao_lianluojilu'
        if (item.platform === 'pc') {
          item.platformIcon = 'V7_iconV7tubiao_qudao-wangzhan'
        } else if (item.platform === 'wap') {
          item.platformIcon = 'V7_iconV7tubiao_qudao-H5'
        } else if (item.platform === 'weixin') {
          item.platformIcon = 'V7_iconV7tubiao_weixin'
        } else if (item.platform === 'wxmini') { // 小程序
          item.platformIcon = 'V7_iconV7tubiao_weixinxiaochengxu'
        } else if (item.platform === 'sdk') { // sdk
          item.platformIcon = 'V7_iconV7tubiao_app'
        } else if (item.platform === 'wxsdk') { // 微信小程序sdk
          item.platformIcon = 'V7_iconV7tubiao_weixinxiaochengxu1'
        } else if (item.platform === 'wxwork') { // 企业微信
          item.platformIcon = 'V7_iconV7tubiao_qiyeweixin'
        }
      }
    })
    return list
  }

  private queryMore () { // 点击加载更多
    this.query.page++
    this.fetchData()
  }

  @Watch('commonData', { immediate: true })
  private commonDataChange (newData) {
    this.restHandle()
    this.fetchData()
  }

  get tagMap () {
    return TagModule.tagMap
  }

  get getPhoneSatisfactionList () {
    return this.$store.state.common.publicCache.phoneSatisfactionList || []
  }

  private beforeMount () {
    this.$getCache('/call/action/general/query', ['phoneSatisfactionList'], false)
  }
}
</script>

<style lang="stylus" scoped>
.history
  height 100%
  overflow auto
  .webchatTodoList
    height calc(100% - 169px)
.top-search
  border-bottom 1px solid $border-main
.history-list
  height calc(100% - 99px)
  overflow auto
  padding-top 20px
  .current-check
    box-shadow 0px 0px 16px 0px rgba(220, 222, 225, 0.8)
  .history-item
    border 1px solid #ECF0F3
    box-sizing border-box
    border-radius 4px
    min-height 80px
    padding 0 20px 0 30px
    position relative
    margin-bottom 40px
    .top-icon
      position absolute
      top -14px
      left 5px
      background $c-main
      color #fff
      font-size 12px
      padding 5px
      box-shadow 0px 1px 6px 0px rgba(98, 172, 224, 0.56)
      border-radius 50%
    .V7_iconV7tubiao_weijietong
      background $c-danger
      box-shadow 0px 1px 6px 0px rgba(252, 108, 92, 0.56)
    .item-line
      position absolute
      left 30px
      top -41px
      border-left 1px solid #ECF0F3
      height 27px
    .item-top
      color $fc-gray3
      height 40px
      border-bottom 1px solid #ECF0F3
      box-sizing border-box
      line-height 40px
      .item-label
        padding-right 6px
    .item-bottom
      color $fc-gray2
      font-size 14px
      height 40px
      line-height 40px
      .V7_iconfont
        color $icon-gray
        margin-left 14px
        cursor pointer
      .active-icon
        color $c-main
    .call-detail-box, .ivr-box
      background $bgc-gray
      color $fc-gray3
      padding 20px 40px
      margin-bottom 10px
      border-radius 4px
      p
        line-height 2
      .info-text-left
         width 50%
    .ivr-box
      padding 34px 40px
     >>> .el-timeline-item__content
       font-size 12px
  .webchatInfo
    background #F3F6F9
    color #686E84
    margin-bottom 10px
    padding 10px
  .webchatIcon
    vertical-align middle
    font-size 12px
    color #A6A6AE
  .accessName
    display inline-block
    max-width 50px
    margin-left 5px
    overflow hidden
    text-overflow ellipsis
    white-space nowrap
    vertical-align middle
  .query-more
    width 100%
    text-align center
    cursor pointer
    color $c-main
    text-decoration underline
  .no-data
    background #fff url('../../../assets/img/no-data.png') no-repeat center center
    width 100%
    height 200px
    background-size 267px auto
  .webchatAgent
    width calc(100% - 90px)
    text-overflow ellipsis
    overflow hidden
    white-space nowrap
.stright
  width 100%
  height 1px
  background: #DBE3EB;
  border-radius: 1px;
  margin 16px 0
</style>
<style lang="stylus">
  .webchatDate
    .el-date-editor
      width 100%
</style>
